<!DOCTYPE html>
<html>
<head>
    <meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
    <meta content="no-cache" http-equiv="pragma" />
    <meta content="no-cache, must-revalidate" http-equiv="Cache-Control" />
    <meta content="Wed, 26 Feb 1997 08:21:57GMT" http-equiv="expires">
    <meta name="format-detection" content="telephone=no"/>
    <title>发表话题</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <!--移动端版本兼容 -->
    <script type="text/javascript">
        var phoneWidth =  parseInt(window.screen.width);
        var phoneScale = phoneWidth/640;
        var ua = navigator.userAgent;
        if (/Android (\d+\.\d+)/.test(ua)){
            var version = parseFloat(RegExp.$1);
            if(version>2.3){
                document.write('<meta name="viewport" content="width=640, minimum-scale = '+phoneScale+', maximum-scale = '+phoneScale+', target-densitydpi=device-dpi">');
            }else{
                document.write('<meta name="viewport" content="width=640, target-densitydpi=device-dpi">');
            }
        } else {
            document.write('<meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi">');
        }
    </script>
    <!--移动端版本兼容 end -->
</head>
<body>

<div class="main">
    <div class="setArray_top fixed">
        <a href="#" class="setArray_top_back">上一步</a>
        <div class="setArray_top_font">第四步：添加商品</div>
        <a href="#" class="setArray_top_go">下一步</a>
    </div>
    <div class="bu3"></div>
    <div class="setAddShopTwo_sum">4.添加商品(
        <div class="addShopTwo_sum"><span class="firstSpan">0</span><span>/3)</span></div>
    </div>
	<div class="classNUll1">
		<div class="addShopTwo_addImg_div setAddShopTwo_addImg_div fixed" style='float:left;'>
			<div class="addHuaXq_top_addImg setAddHuaXq_top_addImg setAddHuaXq_top_addImgTwoThr">
				<div class="daiti2 daiti3"></div>
				<input type="file" onChange="addImgxiangJiimg(this,1)" accept="image/*" capture="camera" id="selectFileImageTwoThr" />
			</div>
		</div>
	</div>
	<div class="classNUll2" style="display:none">
		<div class="addShopTwo_addImg_div setAddShopTwo_addImg_div fixed" style='float:left;'>
			<div class="addHuaXq_top_addImg setAddHuaXq_top_addImg setAddHuaXq_top_addImgTwoThr">
				<div class="daiti2 daiti3"></div>
				<input type="file" onChange="addImgxiangJiimg(this,2)" accept="image/*" capture="camera" id="selectFileImageTwoThr" />
			</div>
		</div>
	</div>
	<div class="classNUll3" style="display:none">
		<div class="addShopTwo_addImg_div setAddShopTwo_addImg_div fixed" style='float:left;'>
			<div class="addHuaXq_top_addImg setAddHuaXq_top_addImg setAddHuaXq_top_addImgTwoThr">
				<div class="daiti2 daiti3"></div>
				<input type="file" onChange="addImgxiangJiimg(this,3)" accept="image/*" capture="camera" id="selectFileImageTwoThr" />
			</div>
		</div>
	</div>
	
	<canvas id="canvas" style="display:none;"></canvas>
</div>
<div class="changeImage" onClick="hideImage()">
</div>
<div class="changeImage2" onClick="hideImage()">
	 <img src="" class="change" onClick="hideImage()"/>
</div>

</body>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/exif.js"></script>
<script>
var sum=0;
function addImgTextarea(obj){
    $(obj).parent().parent().removeClass("changeFile");
	var countAll=$(obj).parent().parent().attr("class").substring(9,$(obj).parent().parent().attr("class").length);

	if(countAll==1){
		if(!$(obj).parent().parent().siblings(".classNUll2").hasClass("changeFile")){
		   if(!$(obj).parent().parent().siblings(".classNUll3").hasClass("changeFile")){
		      $(".classNUll2,.classNUll3").hide();
		   }else {
		      $(".classNUll3").show();
		   }
		}else {
		   $(".classNUll3,.classNUll3").show();
		} 
	}
	if(countAll==2){
		if(!$(obj).parent().parent().siblings(".classNUll3").hasClass("changeFile")){
		    $(".classNUll3").hide();
		}else {
		    $(".classNUll3").show();
		}
	}
	if(countAll==3){
		if(!$(obj).parent().parent().siblings(".classNUll3").hasClass("changeFile")&&!$(obj).parent().parent().siblings(".classNUll2").hasClass("changeFile")){
		    if(!$(obj).parent().parent().siblings(".classNUll1").hasClass("changeFile")){
			    $(".classNUll2,.classNUll3").hide();
			}else {
		       $(".classNUll2").show();
			   $(".classNUll3").hide();
		    } 
		}
	}
	$(".addHuaXq_top_addImg").show();
    $(obj).parent().siblings().show();
	
	$(obj).parent().remove();
	
	
	sum--;
	$(".addShopTwo_sum .firstSpan").text(sum);
	
}
var array=[];
function addImgxiangJiimg(fileObj,count) {  
    var file = fileObj.files['0'];  
	
    var Orientation = null;  
    if (file) {
	    var rFilter = /^(image\/jpeg|image\/png)$/i; // 检查图片格式  
        if (!rFilter.test(file.type)) {  
            alert("请选择jpeg、png格式的图片");  
			init();
            return false;  
        }    
	    array.push($(fileObj).val());
	    $("#loading").remove();
           sum++;
		
			$(".classNUll"+count).append("<div class='addImg_xiangJi_img addImg_xiangJi_imgTwoTwo' style='float:left;'><div id='loading'></div>"+
			                             "<img src='' class='addImg addImg_xiangJi_imgTwo"+count+"' onclick='changeImage(this)'>"+
	                                     "<img src='images/textarea_cha.png' class='addImg_textarea_cha' onclick='addImgTextarea(this)'></div>");
	
			$(".classNUll"+count).find(".setAddShopTwo_addImg_div").hide();
			
        $("#loading").show();
		
		$(".addShopTwo_sum .firstSpan").text(sum);
		if(sum==3){
			$(".addHuaXq_top_addImg").hide();
		}else {
			$(".addHuaXq_top_addImg").show();
		}
        //获取照片方向角属性，用户旋转控制  
        EXIF.getData(file, function() {  
            //alert(EXIF.pretty(this));  
            EXIF.getAllTags(this);   
            //alert(EXIF.getTag(this, 'Orientation'));   
            Orientation = EXIF.getTag(this, 'Orientation');  
            //return;  
        });  
         var oReader = new FileReader();  
        oReader.onload = function(e) {  
		    init();
            var image = new Image();  
            image.src = e.target.result;  
            image.onload = function() {  
                var expectWidth = this.naturalWidth;  
                var expectHeight = this.naturalHeight; 
				//alert(expectWidth+"=expectWidth+++++++++++expectHeight="+expectHeight);
				var scale=expectWidth/expectHeight;
				if(expectWidth > expectHeight && expectWidth>2000){
					expectWidth=1000;
					expectHeight=1000/scale;
				} else if(expectWidth < expectHeight && expectHeight>2000){
					expectHeight=1000;
					expectWidth=1000*scale;
				}
				//alert(expectWidth+"=expectWidth+++++++++++expectHeight="+expectHeight);
                var canvas = document.createElement("canvas");  
                var ctx = canvas.getContext("2d");  
                canvas.width = expectWidth;  
                canvas.height = expectHeight;  

				//如果方向角不为1，都需要进行旋转 
				if(Orientation && Orientation != "" && Orientation != 1){  
					//alert('旋转处理');  
					var degree=0;
					//alert(Orientation);
					switch(Orientation){  
						case 6://需要顺时针（向左）90度旋转  
							degree=90;  
							canvas.width = expectHeight;  
							canvas.height = expectWidth;
							ctx.translate(expectHeight/2,expectWidth/2);
							ctx.rotate(degree * Math.PI / 180);
							ctx.translate(-expectWidth/2,-expectHeight/2);
							ctx.drawImage(image,0,0,expectWidth,expectHeight);
							break;  
						case 8://需要逆时针（向右）90度旋转  ;
							degree=-90;  
							canvas.width = expectHeight;  
							canvas.height = expectWidth;
							ctx.translate(expectHeight/2,expectWidth/2);
							ctx.rotate(degree * Math.PI / 180);
							ctx.translate(-expectWidth/2,-expectHeight/2);
							ctx.drawImage(image,0,0,expectWidth,expectHeight);
							break;  
						case 3://需要180度旋转  
							degree=-180;  
							ctx.rotate(degree * Math.PI / 180);
							ctx.drawImage(image,-expectWidth,-expectHeight,expectWidth,expectHeight);
							break;  
					}
				}else{
					ctx.drawImage(image,0,0,expectWidth,expectHeight);
				} 
               
				var datu = canvas.toDataURL("image/png"); 
				if(count==1){
				   $(".classNUll2").show();
				}
				if(count==2){
				   $(".classNUll3").show();
				}
				$(".classNUll"+count).addClass("changeFile");
				$(".addImg_xiangJi_imgTwo"+count).attr("src", datu);
            };  
        };  
        oReader.readAsDataURL(file);  
    }  
}  

function hideImage(){
    $(".changeImage,.changeImage2,.change").hide();
}
function changeImage(obj){
    $(".changeImage,.changeImage2,.change").show();
    $(".changeImage2 .change").attr("src",$(obj).attr("src"));
}
function init() {
    $("#loading").fadeOut();
}
</script>
</html>